<template>
    <div class="left-num-box">
        <div class="name">{{ name }}</div>
        <div class="num-content-box">
            <div class="title">
                关键指标
            </div>
            <div class="content-weight">宽带份额-移动：<span class="num"
                    :style="numObj.kdfe && (numObj.kdfe < 50) ? { color: 'red' } : {}">{{ numObj.kdfe || '--' }}%</span>
                份额增幅：<span class="num">{{ numObj.kdfezf && numObj.kdfezf != '0' ? numObj.kdfezf : '--' }}%</span>
                <el-popover placement="right" trigger="click" content="来自高德千亿级网络定位服务数据并增加去重算法">
                    <img src="@/assets/img/icon-wh.png" class="icon-wh" slot="reference" />
                </el-popover>
            </div>
            <div class="content-weight">宽带份额-联通：<span class="num">{{ numObj.ltfe || '--' }}%</span>
                份额增幅：<span class="num">{{ numObj.ltfezf && numObj.ltfezf!='0' ? numObj.ltfezf : '--' }}%</span>
                 <el-popover placement="right" trigger="click" content="来自高德千亿级网络定位服务数据并增加去重算法">
                    <img src="@/assets/img/icon-wh.png" class="icon-wh" slot="reference" />
                </el-popover>
            </div>
            <div class="content-weight">
                    宽带份额-电信：<span class="num">{{ numObj.dxfe || '--' }}%</span>
                    份额增幅：<span class="num">{{ numObj.dxfezf && numObj.dxfezf!='0' ? numObj.dxfezf : '--' }}%</span>
                   <el-popover placement="right" trigger="click" content="来自高德千亿级网络定位服务数据并增加去重算法">
                    <img src="@/assets/img/icon-wh.png" class="icon-wh" slot="reference" />
                </el-popover>
            </div>
            <div class="content-weight">客户份额：<span class="num"
                    :style="numObj.khfe && (numObj.khfe < 60) ? { color: 'red' } : {}">{{ numObj.khfe || '--'
                    }}%</span>
                    份额增幅：<span class="num">{{ numObj.khfezf || '--' }}%</span>
                    <el-popover placement="right" trigger="click" content="来源松果大数据">
                    <img src="@/assets/img/icon-wh.png" class="icon-wh" slot="reference" />
                </el-popover>
            </div>
            <div class="content-weight">负增长小区数：<span class="num">{{ numObj.fzzxqs || 0 }}</span>
                <el-popover placement="right" trigger="click" content="(T-1)月使用端口数-(T-2)月使用端口数">
                    <img src="@/assets/img/icon-wh.png" class="icon-wh" slot="reference" />
                </el-popover>
            </div>
            <div class="content-weight">低份额小区数：<span class="num">{{ numObj.dfe || 0 }}</span>
                  <el-popover placement="right" trigger="click" content="宽带份额-移动低于33%">
                    <img src="@/assets/img/icon-wh.png" class="icon-wh" slot="reference" />
                </el-popover>
            </div>
            <div class="content-weight">小区规模：<span class="num">{{ numObj.xqgm || 0 }}</span></div>
        </div>
        <!-- <div class="num-content">
            <div class="blue-bg">
                <img src="@/assets/img/num1.png"/>
                <div>
                    <div class="num-title">客户份额</div>
                    <div class="num" :style="numObj.khfe && (numObj.khfe < 60 ) ? {color: 'red'} : {}">{{numObj.khfe || '--'}}%</div>
                </div>
            </div>
            <div class="blue-bg">
                <img src="@/assets/img/num2.png"/>
                <div>
                    <div class="num-title">宽带份额</div>
                    <div class="num" :style="numObj.kdfe && (numObj.kdfe < 50 ) ? {color: 'red'} : {}">{{numObj.kdfe || '--'}}%</div>
                </div>
            </div>
            <div class="blue-bg">
                <img src="@/assets/img/num3.png"/>
                <div>
                    <div class="num-title">已占端口</div>
                    <div class="num">{{numObj.yzdk || '--'}}</div>
                </div>
            </div>
            <div class="blue-bg">
                <img src="@/assets/img/num4.png"/>
                <div>
                    <div class="num-title">空闲端口</div>
                    <div class="num">{{numObj.kxdk || '--'}}</div>
                </div>
            </div>
            <div class="blue-bg">
                <img src="@/assets/img/num5.png"/>
                <div>
                    <div class="num-title">实占端口占用率</div>
                    <div class="num">{{numObj.szdkzyl || '--'}}%</div>
                </div>
            </div>
            <div class="blue-bg">
                <img src="@/assets/img/num6.png"/>
                <div>
                    <div class="num-title">10GPON小区</div>
                    <div class="num">{{numObj.sfxxq || '--'}}</div>
                </div>
            </div>
       </div> -->
    </div>
</template>
<script>
export default {
    props: {
        numObj: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            name: '黑龙江省',
        }
    },
    methods: {
        showPanel() {
            this.show = !this.show;
        },
        changeName(name) {
            this.name = name
        }
    }
}
</script>
<style lang="scss" scoped>
.left-num-box {
    width: 360px;
    // width: 300px;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1000;
}

.content-weight {
    // font-weight: bold;
    line-height: 30px;
    font-size: 15px;
    position: relative;

    .icon-wh {
        width: 18px;
        height: 18px;
        position: relative;
        top: 4px;
        margin: 0 5px;
        cursor: pointer;
    }

    .come-text {
        font-weight: 400;
        border: 1px solid #dedede;
        border-radius: 3px;
        padding: 0 5px;
        color: #555;
        font-size: 12px;
        position: absolute;
        min-height: 24px;
        line-height: 24px;
        top: 3px;
        background: #fff;
    }
}

.name {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 10px;
    // background: url('../../../assets/img/title-line.png') no-repeat 10px;
    height: 40px;
    font-size: 18px;
    line-height: 60px;
    font-weight: bold;
    padding-left: 15px;
    height: 64px;
    border-bottom: 8px solid #f0f1f3;
}

.blue-bg {
    width: 190px;
    height: 100px;
    margin: 5px;
    background: rgba(235, 245, 255, 1);
    display: flex;
    flex-wrap: wrap;
    float: left;

    img {
        width: 47px;
        height: 47px;
        margin: 25px 10px;
    }

    .num-title {
        line-height: 30px;
        color: #333;
        margin-top: 20px;
        font-weight: bold;
        font-size: 16px;
    }

    .num {
        line-height: 30px;
        color: #777;
    }
}

.num-content-box {
    padding: 10px 15px;

    .title {
        font-size: 16px;
        font-weight: bold;
        line-height: 24px;
        height: 24px;
        background: url('../../../assets/img/line.png') no-repeat;
        padding-left: 24px;
        margin-bottom: 10px;
    }
}
.num {
    margin-right: 5px;
}
</style>
<style>
.el-popover--plain {
    padding: 5px 10px !important;
}
</style>